<template>
    <div class="dkList" v-show="dialogVisible" v-drag>
      <div style="width: 100%;min-height: 36px;float: left;line-height: 36px;background-color: #161E5A" class="title">
        <span style="font-size: 14px;margin-left: 10px">地块数据</span>
        <span class="iconfont icon-guanbi close" style="float: right;margin-right: 10px" @click="toggleDklist"></span>
      </div>

      <div style="width: 100%;float: left;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;border-bottom: 0">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="250"
          :stripe="true"
          :row-class-name="tableRowClassName">
          <el-table-column
            type="index"
            label="序号"
            width="50"></el-table-column>
          <el-table-column
            label="地块编码">
            <template slot-scope="scope">
              <span style="cursor: pointer" @click="toLocation(scope.row.shape1)">{{ scope.row.dkbm }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="mj"
            label="地块面积"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template slot-scope="scope">
              <!--<a style="color:rgb(64, 158, 255)" @click="toLocation(scope.row.shape1)">定位</a>-->
              <a style="cursor: pointer;color:rgb(252, 0, 0)" @click="removeIt(scope.row.objectid)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


</template>

<script>
  import API_map from '../../api/api_map'
    export default {
      name: "Dklist",
      props: {
        dkInfo:{
          type: Object,
          default: ()=>{
            return{}
          }
        },
        map: {
          type: Object,
          default: null
        },
      },
      data(){
          return{
            dialogVisible:false,
            dkslandzmj:[],
            tableData:[]
          }
      },
      created(){
          // this.$bus.on("toggleDklist",this.toggleDklist);
          // this.$bus.on("refreshDkList",this.getDkInfo);

      },
      mounted(){

      },
      methods:{
        removeIt(objectid){
         this.$confirm('是否确认删除该地块？', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then((e) => {
           // if(this.stateManager.getCurrentFunId()==="SelectPolygon") {
           let loading = this.$loading({
             lock: true,
             text: '删除中',
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.7)'
           });
             API_map.deleteDk({ 'objectid': objectid }).then(res => {
               if (!res || res.code != 0) {
                 this.error('删除地块失败');
               } else {
                 this.$message({
                   message: '删除成功',
                   type: 'success'
                 });
                 this.getDkInfo()
                 if (this.map.getLayer("drawLine")) {
                   this.map.removeLayer("drawLine")
                 }
                 if (this.map.getSource("drawLine")) {
                   this.map.removeSource("drawLine")
                 }
                 this.$bus.emit("refreshDkList");
               }
             }).finally(()=>{loading.close()})
           // }
         })
        },
        toLocation(data){
          this.$emit("getLocation", data);
        },
        getDkInfo(){
          let params = {
            xmbm:this.dkInfo.xmbm,
            idcode:this.dkInfo.idcode,
            nf:this.dkInfo.nf,
            zytype:this.dkInfo.radio,
          }
          // let params={
          //   idcode:'4128221991061911121',
          //   xmbm:'zs202012160001',
          //   nf:'2020',
          //   zytype:'01',
          // }
          API_map.dksjDksjList(params).then(res => {
            this.tableData = res.data.dbKhdkxxList||[];
            this.dkslandzmj = res.data.dkslandzmj
          })
        },
        tableRowClassName({row,rowIndex}){
             if(rowIndex%2===1){
               return "rowType1"
             }else {
               return "rowType2"
             }
        },
        handleClose(){

        },
        toggleDklist(){
          this.dialogVisible=!this.dialogVisible;
          if(this.dialogVisible){
            this.getDkInfo();
          }
        }
      },
      beforeDestroy(){
        this.$bus.off("toggleDklist",this.toggleDklist);
        this.$bus.off("refreshDkList",this.getDkInfo);
      },
      // directives:{
      //   drag:{
      //     bind:function (el) {
      //       let odiv = el;   //获取当前元素
      //       el.onmousedown = (e) => {
      //         //算出鼠标相对元素的位置
      //         let disX = e.clientX - odiv.offsetLeft;
      //         let disY = e.clientY - odiv.offsetTop;
      //         if(disY>105&& disY< 151){
      //           console.log('==:',disY>105&& disY< 151)
      //           return
      //         }
      //         let left = '';
      //         let top = '';
      //         document.onmousemove = (e)=>{
      //           //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      //           left = e.clientX - disX;
      //           top = e.clientY - disY;
      //           //绑定元素位置到positionX和positionY上面
      //           //移动当前元素
      //           odiv.style.left = left + 'px';
      //           odiv.style.top = top + 'px';
      //         };
      //         document.onmouseup = (e) => {
      //           document.onmousemove = null;
      //           document.onmouseup = null;
      //         };
      //       };
      //     }
      //   }
      // }
    }
</script>

<style scoped>
  .dkList{
    width: 600px;
    background: #0E1654;
    border-radius: 4px;
    position: absolute;
    left: calc(50vw - 300px);
    bottom: 20px;
    color: white;
    min-height: 100px;
    max-height: 340px;
  }
  .title .close:hover{
    color:#0AC8FF;
  }
  .el-table >>>  .el-table__empty-block{
    background-color: #161E5A;
  }
</style>
<style>
  .dkList  ::-webkit-scrollbar {
   display: none;
   background-color: #0E1654;
  }
.dkList .el-table__body-wrapper{
  background-color:#0E1654 ;
}
  .dkList .rowType1{
    background-color: #161E5A;
  }
  .dkList .rowType1>td{
    background-color: #161E5A !important;
  }
  .dkList .el-table .el-table__header th, .dkList .el-table .el-table__header tr{
    background-color:#161E5A;
  }
  .dkList .rowType2, .dkList .rowType2:hover{
     background-color: #0E1654;
  }
  .dkList .el-table__body-wrapper tr:hover{
    color:#0AC8FF;
  }
  .dkList .el-table--enable-row-hover .el-table__body .rowType2:hover>td{
    background-color: #0E1654;
  }
  .dkList .el-table td, .dkList .el-table th.is-leaf{
    border-bottom: 1px solid #141C5A;
  }

  .dkList .el-table--striped .el-table__body tr.el-table__row--striped td{
    border-bottom: 1px solid #141C5A;
  }
  .dkList{
    color: white;
  }
  .dkList .el-table thead,.dkList .el-table{
    color: white;
    font-size: 12px;
  }
  .dkList .el-table__body-wrapper, .dkList .el-table__header-wrapper, .dkList .el-table, .dkList table{
    border-bottom: 1px solid #141C5A !important;
  }

  .dkList .el-table::before{
    background-color: #161E5A;
  }
</style>
